<template>
	<view class="container">
		<view class="ui-all">
			<view class="ui-list right">
				<text>姓名</text>
				<view class="picker">
					{{formData.name}}
				</view>
			</view>
			<view class="ui-list right">
				<text>民族</text>
				<view class="picker">
					{{formData.nation}}
				</view>
			</view>
			<view class="ui-list right">
				<text>籍贯</text>
				<view class="picker">
					{{formData.nativeplace}}
				</view>
			</view>
			<view class="ui-list right">
				<text>出生日期</text>
				<view class="picker">
					{{formData.birthday}}
				</view>
			</view>
			<view class="ui-list right">
				<text>从事农业时间</text>
				<view class="picker">
					{{formData.work_time}}
				</view>
			</view>
			<view class="ui-list right">
				<text>政治面貌</text>
				<view class="picker">
					{{facelist[formData.face]}}
				</view>
			</view>
			<view class="ui-list right">
				<text>入党时间</text>
				<view class="picker">
					{{formData.party_time}}
				</view>
			</view>
			<view class="ui-list right">
				<text>身份证号</text>
				<view class="picker">
					{{formData.idcard}}
				</view>
			</view>
			<view class="ui-list right">
				<text>联系电话</text>
				<view class="picker">
					{{formData.phone}}
				</view>
			</view>
			<view class="ui-list right">
				<text>通讯地址</text>
				<view class="picker">
					{{formData.liveaddress ?  formData.liveaddress : ''}}
				</view>
			</view>
			<view class="ui-list right">
				<text>文化程度</text>
				<view class="picker">
					{{culturelist[formData.culture]}}
				</view>
			</view>
			<!-- <view class="ui-list right">
				<text>性别</text>
				<picker @change="bindPickerChange" mode='selector' range-key="name" :value="index" :range="sex">
					<view class="picker">
						{{sex[index].name}}
					</view>
				</picker>
			</view> -->

			<button class="save" @tap="savaInfo">去 修 改</button>
		</view>

	</view>
</template>

<script>
	export default {

		data() {
			return {
				formData: {},
				avater: null,
				headimg: null,
				facelist: ["群众", "预备党员", "中共党员", "其他党派人士"],
				culturelist: ["小学", "初中", "中专", "高中", "大专", "本科", "硕士", "博士"],
			}
		},
		created() {
			this.getdata()
		},
		methods: {
			// 点击头像按钮事件
			onClickAvatar() {
				this.chooseImage()
			},

			// 选择头像事件 - 仅限微信小程序
			onChooseAvatar({
				detail
			}) {
				// #ifdef MP-WEIXIN
				const app = this
				app.avatarUrl = detail.avatarUrl
				app.tempFile = {
					path: app.avatarUrl
				}
				// #endif
			},

			// 选择图片
			chooseImage() {
				const app = this
				// 选择图片
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success(chooseImageRes) {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: 'https://scny.nclavi.com/api/upload/image', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								"Access-Token": uni.getStorageSync('token'),
								"storeId": 10001,
								"platform": "h5"
							},
							formData: {
								user: 'test'
							},
							success: (res) => {
								let info = JSON.parse(res.data);
								
								if (info.status == 200) {		
									app.$H.post('/user/up_avatar',{
										form: {
											avater : info.data.fileInfo.external_url
										}
									}).then(res => {
										
									})
									
									app.avater = info.data.fileInfo.external_url;
								}
							}
						});
					}
				});
			},

			// 上传图片
			uploadFile() {
				const app = this
				return UploadApi.image([app.tempFile])
					.then(fileIds => {
						app.form.avatarId = fileIds[0]
						app.tempFile = null
						return true
					})
					.catch(() => {
						return false
					})
			},

			getdata() {
				this.$H.get('/company/get').then(res => {
					if (res.status == 200) {
						this.formData = res.data.detail
					}
				})
			},
			savaInfo() {
				uni.navigateTo({
					url: '/pages/my/my-user-perfection'
				})
			},
			imgUpload(file) {
				let that = this;
				uni.uploadFile({
					header: {
						Authorization: uni.getStorageSync('token')
					},
					url: '/api/upload/image', //需传后台图片上传接口
					filePath: file[0],
					name: 'file',
					formData: {
						type: 'user_headimg'
					},
					success: function(res) {
						var data = JSON.parse(res.data);
						data = data.data;
						that.avater = that.url + data.img;
						that.headimg = that.url + data.img;
					},
					fail: function(error) {
						console.log(error);
					}
				});
			},

		},
		onLoad() {}

	}
</script>

<style lang="less">
	.container {
		display: block;
	}

	.ui-all {
		padding: 20rpx 40rpx;

		.avatar {
			width: 100%;
			text-align: left;
			padding: 20rpx 0;
			border-bottom: solid 1px #f2f2f2;
			position: relative;

			.imgAvatar {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				display: inline-block;
				vertical-align: middle;
				overflow: hidden;

				.iavatar {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			text {
				display: inline-block;
				vertical-align: middle;
				color: #8e8e93;
				font-size: 28rpx;
				margin-left: 40rpx;
			}

			&:after {
				content: ' ';
				width: 20rpx;
				height: 20rpx;
				border-top: solid 1px #030303;
				border-right: solid 1px #030303;
				transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				/* IE 9 */
				-moz-transform: rotate(45deg);
				/* Firefox */
				-webkit-transform: rotate(45deg);
				/* Safari 和 Chrome */
				-o-transform: rotate(45deg);
				position: absolute;
				top: 85rpx;
				right: 0;
			}
		}

		.ui-list {
			width: 100%;
			text-align: left;
			padding: 25rpx 0;
			border-bottom: solid 1px #f2f2f2;
			position: relative;
			display: flex;

			text {
				color: #4a4a4a;
				font-size: 28rpx;
				display: inline-block;
				vertical-align: middle;
				min-width: 200rpx;
			}

			input {
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
			}

			button {
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
				background: none;
				margin: 0;
				padding: 0;

				&::after {
					display: none;
				}
			}

			.picker {
				width: 90%;
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
				text-align: right;
				padding-right: 30rpx;
			}

			textarea {
				color: #030303;
				font-size: 30rpx;
				vertical-align: middle;
				height: 150rpx;
				width: 100%;
				margin-top: 50rpx;
			}

			.place {
				color: #999999;
				font-size: 28rpx;
			}
		}

		.right:after {
			// content: ' ';
			// width: 20rpx;
			// height: 20rpx;
			// border-top: solid 1px #030303;
			// border-right: solid 1px #030303;
			// transform: rotate(45deg);
			// -ms-transform: rotate(45deg);
			// /* IE 9 */
			// -moz-transform: rotate(45deg);
			// /* Firefox */
			// -webkit-transform: rotate(45deg);
			// /* Safari 和 Chrome */
			// -o-transform: rotate(45deg);
			// position: absolute;
			// top: 33rpx;
			// right: 0;
		}

		.save {
			background: rgb(23, 191, 139);
			border: none;
			color: #ffffff;
			margin-top: 40rpx;
			font-size: 28rpx;
		}
	}
</style>